<template>
  <view>

    <view class="content11 content11-home">
      <view class="box-search">
        <u-input @focus="onFocus"
                 v-model="searchContent"
                 class="search-input"
                 placeholder="搜索"
                 confirm-type="search"
                 @confirm="searchInput"
                 :clearable="false"
                 @input="getHeadList()" />
        <u-icon @click="searchInput()"
                type="search"
                name="search" />
      </view>

      <u-popup :mask=false
               class="search-promps"
               v-model="showSearchPromps"
               mode="top">
        <view class="search-promps-content"
              v-if="headTitle.length">
          <view class="content-item"
                @click="clkSearchPrompt(item)"
                v-for="(item , index) in headTitle"
                :key="index">{{item.title}}</view>
        </view>
      </u-popup>

      <u-tabs-swiper font-size="38"
                     style="width: 230rpx; background-color: #00000000;"
                     class="tabs-swiper1"
                     :offset="[9,10]"
                     :active-item-style="{color: '#FFFFFF', borderBottom:'2rpx solid #FFFFFF'}"
                     :show-bar=false
                     :item-width=90
                     inactive-color="#707070"
                     activeColor="#4D5B80"
                     ref="tabs"
                     :list="list"
                     :current="current"
                     @change="change"
                     :is-scroll="false"
                     :dotStyle="{showDot:true, dotColor:'warning'}">
      </u-tabs-swiper>

      <swiper class="swiper-box"
              :current="swiperCurrent"
              @transition="transition"
              @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view v-if="dataList.length > 0"
                       scroll-y
                       style="height: 100%;width: 100%;"
                       @scrolltolower="reachBottom">
            <view class="order">
              <view class="item-header">共搜索到{{dataList.length}}条帖子</view>
              <view class="item"
                    v-for="(item, index) in dataList"
                    @click="linkTo(item)"
                    :key="index">
                <view class="line1"
                      @click.stop="onhead(item)">
                  <!-- <image :src="item.goodsUrl" mode="aspectFill"></image> -->
                  <u-avatar level-size="90"
                            level-icon="/static/img/community/ic_daka.png"
                            :show-level="item.starFlag==='1'"
                            mode="circle"
                            :src="`${$store.state.img_url}${item.avatar}`"
                            img-mode="aspectFill">
                  </u-avatar>
                  <view class="item-right">
                    <view class="line1-name">{{item.nickName}}</view>

                  </view>
                </view>
                <view class="line1-title"> {{item.title}}</view>

                <view class="line2"
                      v-if="item.editContent"> 《{{item.editContent}}》</view>
                <view class="line3"> {{item.sendTime}}</view>

              </view>
              <u-loadmore :status="loadStatus"
                          bgColor="#ffffff"></u-loadmore>
            </view>
          </scroll-view>
          <view class="empty"
                v-else>
            <view class="empty-text">暂无搜索结果</view>
          </view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view v-if="dataList.length > 0"
                       scroll-y
                       style="height: 100%;width: 100%;"
                       @scrolltolower="reachBottom">
            <view class="order">
              <view class="item-header">共搜索到{{dataList.length}}条附件</view>
              <view class="item"
                    v-for="(item, index) in dataList"
                    @click="linkTo(item)"
                    :key="index">
                <view class="line1"
                      @click.stop="onhead(item)">
                  <!-- <image :src="item.goodsUrl" mode="aspectFill"></image> -->
                  <u-avatar level-size="90"
                            level-icon="/static/img/community/ic_daka.png"
                            :show-level="item.starFlag==='1'"
                            mode="circle"
                            :src="`${$store.state.img_url}${item.avatar}`"
                            img-mode="aspectFill">
                  </u-avatar>
                  <view class="item-right">
                    <view class="line1-name">{{item.nickName}}</view>

                  </view>
                </view>

                <view class="fujian-line2">
                  <view class="fujian-line2-title"><text class="fujian-line2-title">{{item.attachName}}</text></view>
                  <view class="fujian-line2-download"
                        @click.stop="onDownLoad(item)"></view>
                </view>
                <view class="line1-title"> {{item.title}}</view>
                <!-- <view class="fujian-line3" v-if="item.editContent"> 《{{item.editContent}}》</view> -->
                <view class="line3"> {{item.sendTime}}</view>

              </view>
              <u-loadmore :status="loadStatus"
                          bgColor="#ffffff"></u-loadmore>
            </view>
          </scroll-view>

          <view class="empty"
                v-else>
            <view class="empty-text">暂无搜索结果</view>
          </view>
        </swiper-item>

      </swiper>
    </view>
  </view>
</template>

<script>
import apis from "@/apis.js";
export default {
  name: "u-home-search",
  data() {
    return {
      searchContent: "",
      showSearchPromps: false,
      orderList: [[], [], []],
      dataList: [],
      list: [
        {
          name: "帖子",
        },
        {
          name: "附件",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      followCount: 4,
      loadStatus: "loadmore",
      form: {
        pageNo: 1,
        pageSize: 20,
      },
      tableData: [],
      headTitle: [],
    };
  },

  onLoad() {
    // this.getOrderList(0);
    // this.getOrderList(1);
  },
  onShow() {
    this.swiperCurrent = 0;
  },
  methods: {
    onhead(itemData) {
      console.log("itemData", itemData);
      this.$u.route({
        url: "pages/tabbar/tabbar-1/personHome",
        params: {
          id: itemData.authorId,
        },
      });
    },
    linkTo(item) {
      this.$u.route({
        url: "pages/tabbar/tabbar-1/post-detail",
        params: {
          id: item.id,
        },
      });
    },
    init() {
      this.searchContent = "";
      this.headTitle = [];
      this.dataList = [];
    },
    onDownLoad(item) {
      
            location.href = `${this.$store.state.img_url}${item.url}`
			// let that = this
      // uni.downloadFile({
      //   url: `${this.$store.state.img_url}${item.url}`, //仅为示例，并非真实的资源
      //   header: {
      //     Authorization: this.$store.state.TOKEN,
      //   },
      //   success: (res) => {
      //     if (res.statusCode === 200) {
      //       // window.open(`${this.$store.state.img_url}${item.url}`);
			// 			// uni.showToast({
      //       //   title: "下载成功",
      //       //   icon: 'none'
      //       //   })
      //       // this.$refs.uTips.show({
      //       //   title: "下载成功",
      //       //   type: "success",
      //       //   duration: "2300",
      //       // });
      //       console.log("下载成功", res);
			// 			this.saveImg(res.tempFilePath)
      //     }
      //   },
      // });
    },
		saveImg: function(url){
			let oA = document.createElement("a");
			oA.download = '';// 设置下载的文件名，默认是'下载'
			oA.href = url;
			document.body.appendChild(oA);
			oA.click();
			oA.remove(); // 下载之后把创建的元素删除
		},
    clkSearchPrompt: function (searchItem) {
      this.dataList = [];
      this.showSearchPromps = false;
      this.searchContent = searchItem.title;
      this.getList(this.current, true);
    },
    searchInput: function () {
      // this.showSearchPromps = true;
      this.form.pageNo = 1;
      this.dataList = [];
      if (this.searchContent) {
        this.getList();
      }
    },
    onFocus() {
      if (!this.searchContent) {
        this.showSearchPromps = false;
      } else {
        this.showSearchPromps = true;
        this.getHeadList();
      }
    },
    // 模糊帖子搜索文章标题
    getHeadList(index, input) {
      if (!this.searchContent) {
        this.showSearchPromps = false;
      }
      let urlApi = "";
      if (this.swiperCurrent === 1) {
        urlApi = apis.getAttachList;
      } else {
        urlApi = apis.getArticleList;
      }
      this.$http
        .get(urlApi, {
          pageNo: 1,
          pageSize: 100,
          // subjectType: this.currentMajor || "",
          title: this.searchContent,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.headTitle = res.data.result.records;
            if (this.headTitle.length) {
              this.showSearchPromps = true;
            }
            console.log("safd", this.headTitle);
          }
        });
    },
    // 模糊帖子搜索文章标题
    getList(index, input) {
      console.log("模糊搜索文章标题", this.searchContent);
      let urlApi = "";
      if (this.swiperCurrent === 1) {
        urlApi = apis.getAttachList;
      } else {
        urlApi = apis.getArticleList;
      }
      this.$http
        .get(urlApi, {
          ...this.form,
          // subjectType: this.currentMajor || "",
          title: this.searchContent,
        })
        .then((res) => {
          if (res.data.code === 200) {
            let data = this.dataList.concat(res.data.result.records);
            this.dataList = data;
            this.showSearchPromps = false;
            if (res.data.result.total <= this.dataList.length) {
              this.loadStatus = "nomore";
              this.isDot = true;
            } else {
              this.loadStatus = "loadmore";
              this.isDot = false;
            }
          }
        });
    },
    clkFollow(item) {
      //
      // item.loading = true;
    },
    reachBottom() {
      // 此tab为空数据
      this.form.pageNo = this.form.pageNo + 1;
      this.getList(this.swiperCurrent);
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
      this.dataList = [];
      this.form.pageNo = 1;
      // this.getList(index);
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "uview-ui/index.scss";
.content11 {
  display: flex;
  height: 100vh;
  // width: 100vh;
  flex-flow: column nowrap;
  padding: 20rpx 29rpx;
  padding-top: 25rpx;
}

.box-search {
  display: flex;
  flex-flow: row nowrap;

  padding: 10rpx 25rpx;

  background: #e9ebf4;
  box-shadow: -1rpx -2rpx 2rpx #ffffff;
  opacity: 1;
  border-radius: 25rpx;
  align-items: center;
  height: 60rpx;
  line-height: 60rpx;

  .search-input {
    flex-grow: 1;
    font-size: 23rpx;
    text-align: left;
  }
}
</style>

<style lang="scss" scoped>
@import "uview-ui/index.scss";
.order {
  // width: 710rpx;
  background-color: #e9ebf4;
  margin: 20rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;

  .item-header {
    font-size: 31rpx;
    font-family: SimHei;
    padding: 15rpx;
    font-weight: 400;
    align-self: flex-start;
    line-height: 40rpx;
    text-align: left;
    color: #707070;
    opacity: 1;
  }

  .item {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    background-color: #ffffff;
    border-bottom: 23rpx solid #e9ebf4;

    padding: 28rpx 17rpx 13rpx 17rpx;

    .line1 {
      display: flex;
      align-items: center;
      .item-right {
        display: flex;
        flex-direction: column;
      }
      .line1-name {
        // margin-top: 30rpx;
        font-size: $title-font;
        margin-left: 15rpx;
      }
    }

    .line1-title {
        font-size: $artical-title-font;
      margin-top: 30rpx;
      // margin-left: 15rpx;
    }

    .line2 {
      font-size: 31rpx;
      font-family: SimHei;
      font-weight: 400;
      line-height: 40rpx;
      color: $text-color;
      opacity: 1;
      margin-top: 13rpx;
    }

    .line3 {
      font-size: $artical-time-font;
      font-family: SimHei;
      font-weight: 400;
      line-height: 31rpx;
      color: $econdary-word-color;
      margin-top: 17rpx;
      opacity: 1;
    }

    .fujian-line2 {
      display: flex;
      width: 100%;
      margin-top: 13rpx;
      flex-grow: 1;
      flex-flow: row nowrap;

      .fujian-line2-title {
        font-size: 31rpx;
        font-family: SimHei;
        font-weight: 400;
        line-height: 46rpx;
        color: #4d5b80;
        text-align: left;
        opacity: 1;
        flex-grow: 1;
        text-decoration: underline;
        width: 100px;
        white-space: pre-line;
        word-break: break-word;
      }

      .fujian-line2-download {
        width: 50rpx;
        margin-right: 30rpx;
        height: 47rpx;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url(@/static/img/ic_download.png);
      }
    }

    .fujian-line3 {
      font-size: 23rpx;
      margin-top: 13rpx;
      font-family: SimHei;
      font-weight: 400;
      line-height: 31rpx;
      color: #707070;
      opacity: 1;
    }
  }

  .bottom {
    display: flex;
    margin-top: 40rpx;
    padding: 0 10rpx;
    justify-content: space-between;
    align-items: center;

    .btn {
      line-height: 52rpx;
      width: 160rpx;
      border-radius: 26rpx;
      border: 2rpx solid $u-border-color;
      font-size: 26rpx;
      text-align: center;
      color: $u-type-info-dark;
    }

    .evaluate {
      color: $u-type-warning-dark;
      border-color: $u-type-warning-dark;
    }
  }
}

.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  // height: 100%;
  display: flex;

  .empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #e9ebf4;
    width: 100%;
    opacity: 1;
    border-radius: 10rpx;
    margin-bottom: 150rpx;
    margin-top: 33rpx;

    .empty-text {
      font-size: 38rpx;
      font-family: SimHei;
      font-weight: 400;
      line-height: 52rpx;
      color: #4d5b80;
      opacity: 1;
    }
  }
}

.tabs-swiper1 {
  align-self: center;
  margin-top: 33rpx;
}

.search-promps {
  margin: 186rpx 30rpx 0 30rpx;
}
.search-promps-content {
  padding: 15rpx 30rpx 15rpx 45rpx;
  text-align: left;
  max-height: 400rpx;
  .content-item {
    padding-bottom: 20rpx;
    padding-top: 20rpx;
    border-bottom: 2rpx solid #ddd;
    &:last-child {
      padding-bottom: 0;
      border-bottom: 0rpx solid #ddd;
    }
  }
}
</style>
<style lang="scss">
</style>
